import { Tabs } from '@ant-design/react-native'
import { useNavigation, useRoute } from '@react-navigation/native'
import React, {useState, useEffect} from 'react'
import { View, Text, ImageBackground, StyleSheet,TouchableOpacity, Image, ScrollView, StatusBar } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
// import { Tabs } from '../../components'
import {useDispatch, useSelector} from 'react-redux'
import { Header } from '../../components'
import { GET, pxToPt,width } from '../../utils'
import {USERINFODETAIL} from '../../service'



export default function index() {
  const tabs = [
    { title: 'REVIEWS' },
    { title: 'PICS' }
  ];
  const navigation = useNavigation()
  const route = useRoute()
  const {params: {fid}} = route
  const user = useSelector(state=>state.user)
  const friendMap = user.friendMap
  const userInfo = user.currentUser
  const [friendInfo, setFriendInfo] = useState({})
  useEffect(() => {
    if(friendMap[fid]){
      setFriendInfo(friendMap[fid])
    }else{
      GET(USERINFODETAIL+fid, {token: userInfo.token}).then(res=>{
        if(res.code===200){
          setFriendInfo({...res.data})
        }
      })
    }
  }, [])

  return (
    <View style={styles.container}>
      <StatusBar translucent={true} backgroundColor="transparent" />
      <ImageBackground style={styles.bg} source={require('../../../assets/bg/woman.jpeg')}>
        <Header left={<Text onPress={navigation.goBack}>back</Text>} />
        <View style={styles.titWrapper}>
          <View style={styles.til}>
            <Text style={styles.name}>{friendInfo.fname}</Text>
          </View>
          {
            userInfo.userId !== fid&&
            (<TouchableOpacity onPress={()=> navigation.navigate(friendMap[fid]? 'Chating': 'Addfriend', {fid: friendInfo.fid})}>
            <LinearGradient 
                start={{x: 0.25, y: 0.25}} end={{x: 0.75, y: 0.75}}
                colors={['rgb(244, 92, 81)', 'rgb(234,49,82)', 'rgb(149, 47, 13)']}
                style={styles.add}
            >
              <Text style={styles.addFont}>{friendMap[fid]? 'Chat': '+'}</Text>
            </LinearGradient>
          </TouchableOpacity>)
          } 
        </View>
        <View style={styles.statistics}>
          <View style={styles.statisticsItem}>
            <Text style={styles.value}>123</Text>
            <Text style={styles.label}>123</Text>
          </View>
          <View style={styles.statisticsItem}>
            <Text style={styles.value}>123</Text>
            <Text style={styles.label}>123</Text>
          </View>
          <View style={styles.statisticsItem}>
            <Text style={styles.value}>1456</Text>
            <Text style={styles.label}>123</Text>
          </View>
        </View>
      </ImageBackground>
      <Tabs
       styles={{
        topTabBarSplitLine: {
          borderBottomWidth: 0,
        },
      }}
          tabs={tabs}
          tabBarPosition="top"
          renderTabBar={tabProps => (
            <View
              style={{
                paddingHorizontal: 16,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-evenly',
                height: pxToPt(40),
                backgroundColor: 'rgb(21,22,30)'
              }}
            >
              {tabProps.tabs.map((tab, i) => (
                // change the style to fit your needs
                <TouchableOpacity
                  activeOpacity={0.9}
                  key={tab.key || i}
                  style={{
                    // width: '30%',
                    padding: 6,
                  }}
                  onPress={() => {
                    const { goToTab, onTabClick } = tabProps;
                    // tslint:disable-next-line:no-unused-expression
                    onTabClick && onTabClick(tabs[i], i);
                    // tslint:disable-next-line:no-unused-expression
                    goToTab && goToTab(i);
                  }}
                >
                  <Text
                    style={{
                      color: tabProps.activeTab === i ? 'green' : undefined,
                    }}
                  >
                    {tab.title}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          )}
        >
          <ScrollView style={styles.userProfile}>
          <View style={styles.userProfileItem}>
               <Text style={styles.userProfileLabel}>name:</Text>  
               <Text style={styles.userProfileItemText}>{friendInfo.fname||friendInfo.username}</Text>
              </View>
              <View style={styles.userProfileItem}>
                <Text style={styles.userProfileLabel}>gender:{friendInfo.gender? 'male': 'female'}</Text>
                <Text style={styles.userProfileItemText}>female</Text>
              </View>
              <View style={styles.userProfileItem}>
                <Text style={styles.userProfileLabel}>city</Text>
                <Text style={styles.userProfileItemText}>{friendInfo.address || '上海'}</Text>
              </View>
              <View style={styles.userProfileItem}>
                <Text style={styles.userProfileLabel}>email:</Text>
                <Text style={styles.userProfileItemText}>{friendInfo.email}</Text>
              </View>
              <View style={styles.userProfileItem}>
                <Text style={styles.userProfileLabel}>motto:</Text>
                <Text style={styles.userProfileItemText}>{friendInfo.mottto||'react-native 真扯淡，但是原因是我很菜'}</Text>
              </View>
          </ScrollView>
          <ScrollView> 
            <View style={{flexDirection: 'row'}}>
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
            </View>
            <View style={{flexDirection: 'row'}}>
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
            </View>
            <View style={{flexDirection: 'row'}}>
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
            </View>
            <View style={{flexDirection: 'row'}}>
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
              <Image style={{flex: 1, height: pxToPt(200)}} source={require('../../../assets/bg/woman.jpeg')} />
            </View>
          </ScrollView>
        </Tabs>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bg:{
    height: pxToPt(300),
    justifyContent: 'center',
  },
  titWrapper: {
    width: pxToPt(300),
    marginTop: pxToPt(100),
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignSelf: 'flex-end'
  },
  til: {
   flex: 1
  },
  add: {
    height: pxToPt(50),
    width: pxToPt(50),
    borderRadius: pxToPt(50),
    backgroundColor: 'red',
    alignSelf: 'flex-end',
    alignItems: 'center',
    justifyContent: 'center',
  },
  addFont: {
    fontSize: pxToPt(20),
    fontWeight: 'bold',
    color: 'white'
  },
  name: {
    width: pxToPt(250),
    fontSize: pxToPt(60),
    color: 'white',
    fontWeight: '200',
  },
  statistics: {
    // marginTop: pxToPt(50),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  statisticsItem: {
    fontWeight: 'bold',
    color: 'white',
    alignItems: 'center'
  },
  label: {
    color: 'rgb(63,64,74)'
  },
  value: {
    fontSize: pxToPt(20),
    fontWeight: '500',
    color: 'white'
  },
  address: {
    width: pxToPt(300),
    fontSize: pxToPt(30),
    color: 'black',
    fontWeight: '200',
    paddingLeft: pxToPt(30)
  },
  tabStyle: {
    flex: 1,
    height: pxToPt(200),
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: 'rgb(28, 30, 39)'
  },
  userProfile: {
    paddingLeft: pxToPt(20),
    paddingRight: pxToPt(20),
    backgroundColor: 'rgb(21,22,30)'
  },
  userProfileItem: {
    justifyContent: 'space-around',
    borderBottomColor: 'gray',
    borderBottomWidth: pxToPt(0.2),
    height:pxToPt(90),
  },
  userProfileLabel: {
    color: 'rgb(84,86,94)',
    fontWeight: '300',
    fontSize: pxToPt(12),
  },
  userProfileItemText:{
    color: 'white',
    fontSize: pxToPt(15),
  }
})

